<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>this指向</title>
  </head>
  <body>
    <script>
      // JS 中 this 是谁？
      // 谁调用就是谁， xxx.func()
      // 看不出来谁调用， 一般是window

      // 全局的变量相当于是添加给了 window对象
      // 鸿蒙中没有这个对象
      // 1. 看不出来谁调用
      function sayHi() {
        console.log("sayHi", this);
      }
      sayHi();

      // 2. 看得出来谁调用
      const person = {
        name: "张三",
        age: 18,
        // 给对象定义方法
        // 1. 定义普通函数
        sayHello() {
          console.log("sayhello", this);
        },
        // 2. 定义箭头函数
        sayHiHi: () => {
          console.log("sayhihi", this);
        },
        // 3. 定义函数中包函数
        // 3.1 普通函数中包箭头函数
        // sayHiPlus() {
        //   console.log("sayHiPlus1", this); // this -> person
        //   setTimeout(() => {
        //     console.log("sayHiPlus2", this); // this -> 上一级作用域， 函数
        //   }, 1000);
        // },

        // 3.2 普通函数包普通函数
        sayHiPlus() {
          console.log("sayHiPlus1", this); // this -> person
          setTimeout(function () {
            // 没有通过任何方式 指定this， 也就是说看不出来谁在调用
            console.log("sayHiPlus2", this); // this -> 上一级作用域， 函数
          }, 1000);
        },
      };
      // person.sayHello 中this指向的是 person
      // syaHiHi绑定的是箭头函数
      // 箭头函数： 创建时会绑定当前作用域中的this， 如果有的话
      // 若当前作用域没有， 向上一级去找，找到全局为止，若找不到，就window
      // 常见的作用域： 函数作用域， 块级作用域， 模块作用域， 全局作用域
      person.sayHello();
      person.sayHiHi();
      person.sayHiPlus();
      // 面试话术：
      // 聊到了this， 聊到了箭头函数， 聊到了坑点
      /* 
      1. this 这个东西在JS 和TS中都比较灵活，因为会动态地改变， 但是有一些记忆规则：

          简单来说就是， 谁调用就是谁， 看不出来谁调用，一般是全局对象，如果是在浏览器中，这个全局对象就是window
      也有特殊情况， 比如箭头函数， 创建的时候this就绑定了，绑定的是上一级作用域中的this， 比如函数作用域，模块作用域，全局作用域等等

      2. 箭头函数： 在鸿蒙开发中是经常用到的， 因为如果不指定 this 可能会出现指向错误的情况，导致无法正常取值
                   比如像在buidParams 中 和 子组件需要通过回调函数传递数据给 父组件时， 就需要通过箭头函数传递，这两个是比较常见的

      3. 在js中 早期还有一些更灵活的写法， 比如call，apply，bind，但是有了箭头函数之后一般不需要使用他们了

      拓展： 看自己是否有准备
      之前研究this指向的时候看到过， 还自己手写过
      */
    </script>
  </body>
</html>
